import React, { useEffect, useState } from 'react'
import { Button, Form, Input, Toast } from 'antd-mobile'
import { getConfig, runCommand, useSetState } from '../web/util'
import { ILoginData, login } from '../apis/login'
import { getConfig as coreGetConfig } from '../tokens/core'
import { useNavigate } from 'react-router-dom'
import { ACCOUNT_NAME, DEVICE_NAME, DEVICE_UUID, TOKEN, getDeviceName, getDeviceUuid } from '../tokens/const'

export const LoginPage: React.FC<{}> = ({ }) => {
  const config = coreGetConfig()
  const deviceUuid = getDeviceUuid()
  const deviceName = getDeviceName()
  const { data: state, setData: setState, time } = useSetState<ILoginData>({ username: ``, password: ``, device_name: deviceName, device_uuid: deviceUuid })
  const [loading, setLoading] = useState<boolean>(false)
  const [type, setType] = useState<string>(``)

  const navigate = useNavigate()
  useEffect(() => {
    getConfig(`DEVICE_UUID`).then((uuid: string) => {
      if (uuid) {
        config.set(`DEVICE_UUID`, uuid)
        setType(`云`)
        setState({
          device_uuid: uuid
        })
      } else {
        config.set(`DEVICE_UUID`, deviceUuid)
        setState({
          device_uuid: deviceUuid
        })
      }
    })
  }, [])
  const doLogin = async (data: ILoginData) => {
    try {
      setLoading(true)
      config.set(DEVICE_UUID, data.device_uuid)
      config.set(DEVICE_NAME, data.device_name)
      config.set(ACCOUNT_NAME, data.username)
      const token = await login(data)
      config.set(TOKEN, token);
      runCommand(`COMMAND_LOGIN_SUCCESS`, { token, ...data })
      navigate('/autojs/core/mobile/mine', { replace: true })
    } catch (e) {
      Toast.show(e.message)
    } finally {
      setLoading(false)
    }
  }
  return <div className='flex flex-col h-full px-12px'>
    <Form layout='horizontal' initialValues={state} onFinish={e => {
      doLogin(e)
    }} hasFeedback={true} className='mt-24px pb-32px' footer={<Button block type='submit' color='primary' loading={loading} size='middle'>提交</Button>}>
      <div className='text-center text-24px mt-18px font-600'>欢迎使用老哥助手</div>
      <p className='text-center text-14px mt-8px mb-24px'>多谢您信任老哥！</p>
      <p className='text-center text-14px mt-8px mb-24px'>{type} 表单最后修改：{time()}</p>
      <Form.Item
        name='username'
        label='用户名'
        rules={[{ required: true, message: '用户名不能为空' }]}
      >
        <Input onChange={e => {
          setState({
            username: e
          })
        }} placeholder='请输入用户名' />
      </Form.Item>
      <Form.Item
        name='password'
        label='密码'
        rules={[{ required: true, message: '密码不能为空' }]}
      >
        <Input type='password' onChange={e => {
          setState({
            password: e
          })
        }} placeholder='请输入密码' />
      </Form.Item>
      <Form.Item
        name='device_uuid'
        label='设备ID'
      >
        <Input disabled placeholder='请输入设备ID' />
      </Form.Item>
      <Form.Item
        name='device_name'
        label='设备编号'
        rules={[{ required: true, message: '设备编号不能为空' }]}
      >
        <Input onChange={e => {
          setState({
            device_name: e
          })
        }} placeholder='请输入设备编号' />
      </Form.Item>
    </Form>
  </div>
}
